<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    destroy-on-close
    custom-class="drawerClass"
    size="40%"
  >
    <div class="searchContent" style="margin-top: 10px; padding: 20px">
      <el-input
        style="width: 40%"
        v-model="queryParams.keywords"
        @keydown.enter.native="search"
        clearable
        placeholder="请搜索商户名称"
      ></el-input>
      <el-button
        style="margin-left: 20px"
        class="button"
        @click="search"
        type="primary"
        cl
        >查询</el-button
      >
      <div v-if="btnDisabled" :class="{'mask':btnDisabled==true}" style="display:flex; justify-content:center;align-items: center;">
        <span style="color:#fff">{{noneText}}</span>
      </div>
      <!-- margin-top:30px; -->
      <el-card v-if="entity.Id" class="box-card" style="width:50%;margin-top:30px;" shadow="hover">
        <div slot="header" class="clearfix" style="display:flex; justify-content: space-between;align-items: center;">
          <div>
            <i  style="color:#409eff" class="el-icon-s-shop"></i>
            <span> {{entity.Title}}</span>
          </div>
          <el-tag style="float: right; padding:0 10px" type="">{{entity.Phone}}</el-tag>
        </div>
        <div>
         <p style="font-size:14px">{{entity.Address}}</p>
        </div>
      </el-card>

      <div  v-show="!entity.Id && !loading" style="margin-top:150px;display:flex;justify-content: center;">
       <el-empty description="暂无商户，请搜索商户进行添加"></el-empty>
      </div>
     
      <div v-show="loading" style="margin-top:150px;display:flex;justify-content: center;">
        <img style="width:30%;" src="https://5b0988e595225.cdn.sohucs.com/images/20180509/82fef609b32a4efa89b3608c02628d1e.gif" alt="">  
        <span style="color:#999;position: absolute;margin-top:40px;">加载中...</span>
      </div>

      
        <!-- 分页 -->
        <!-- <div style="display: flex; justify-content: flex-end; margin-top: 8px">
          <pagination
            :total="pagination.total"
            :page.sync="pagination.PageIndex"
            :limit.sync="pagination.PageRows"
            @pagination="handlePageChange"
          />
        </div> -->
      </div>
    </div>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 99999,
      }"
    >
      <el-button @click="drawer = false">取消</el-button>
      <el-button :type="btnType" :loading="btnLoading" @click="handleSubmit" :disabled="btnDisabled"
        >{{btnDisabled?'该商户已添加':'添加'}}</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
import Upload from "@/components/upload.vue";
const regExp = new RegExp("^1[3456789]\\d{9}$"); // 手机号正则
export default {
  props: {
    parentObj: { type: Object },
  },
  components: {
    Upload,
  },
  data() {
    return {
      // 已添加商户的文本信息
      noneText:"",
      // 按钮是否禁用
      btnDisabled:false,
      // 按钮的类型
      btnType:"primary",
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: [10, 20, 30, 50],
      },
      // 参数
      queryParams:{
        keywords:""
      },
      // 显示抽屉类型
      drawer: false,
      direction: "rtl",
      // 搜索出来的商户列表数据
      entity: {},
      btnLoading: false,
      title: "",
      loading: false,
      timeout: null,
      // 选择的列表数据
      multipleSelection: [],
      // 缓存用户信息
      userInfo:{}
      // rules: {
      //   SupplieId: [
      //     { required: true, message: "请选择公司", trigger: "change" },
      //   ],
      //   UserName: [
      //     { required: true, message: "请输入用户名", trigger: "blur" },
      //   ],
      //   RealName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      //   UserPhone: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (!value) {
      //           callback(new Error("请输入手机号"));
      //         } else if (!regExp.test(value)) {
      //           callback(new Error("请输入正确的手机号"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   newPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      //   Sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      // },
    };
  },
  // 监听页面表格高度
  computed: {
    height() {
      return document.documentElement.clientHeight * 0.65;
    },
  },
  created(){
   

  },
  methods: {
    // 查询商户列表
    search() {
      this.tableData=[]
      this.getDataList();
    },

    // 分页函数
    handlePageChange(data) {
      this.pagination.current = data.pageIndex;
      this.pagination.pageSize = data.pageSize;
      this.getDataList(); //这是重新获取修改日志列表
    },
    // 多选框选中限制条件
    selectEnable(row, rowIndex) {
      // 获取选中行
      const selectArr = this.$refs.multipleSelection.selection;
      const state = selectArr.some((item) => item.Id === row.Id);
      return (
        selectArr.length < 1 || state //限制选中条数 选中一个。其余禁止选择
      );
    },
    // 表格列表选择事件
    // 表格列表多选事件
    handleSelectionChange(val) {
      console.log("获取选中行是", val);
      this.multipleSelection = val;
    },

    init() {
     
      this.entity = {};
      this.queryParams.keywords=""
      this.drawer = true;
      // if (this.$refs["form"]) {
      //   this.$refs["form"].clearValidate();
      // }
    },

    openForm(Id, CompanyId) {
      this.init();
      this.title = "新增商户"
      // 默认可以添加按钮
      this.btnDisabled=false
      // 按钮颜色默认
      this.btnType="primary"
      let userInfo =(JSON.parse(sessionStorage.getItem('userInfo')))
      this.userInfo = userInfo
      console.log('获取缓存信息========================================',  this.userInfo)
    },
    handleClose(done) {
      done();
    },
    handleSelect(item) {
      console.log(item);
    },
    // 获取搜索的商户名称
    getDataList() {
      var that =this 
      // 清空商户已添加遮罩层
      this.btnDisabled=false
      // 显示加载状态
      this.loading=true
      this.entity={}
      this.$http
        .post("/Base_Manage/Base_Company/GetEnterprise", this.queryParams)
        .then((resJson) => {
          if (resJson.Success) {
            if(resJson.Data==null){
              that.loading=false
              that.entity={}
            }else{
              setTimeout(function(){
                that.loading=false
                that.entity=resJson.Data
              },1000)
            }
            console.log('搜索的数据', resJson)
          } else {
            this.$message.error(res.Msg);
          }
        });
    },
    // 添加
    handleSubmit() {
      if(this.entity.Id ==undefined  && this.loading == false){
        // 禁用添加按钮
        this.$message.error('请先搜索商户再添加')
        return
      }
      var that = this
      console.log('添加', this.entity);
      let params = {
          MerchantId: this.entity.Id,
          MerchantName: this.entity.Title,
          BankId: this.userInfo.Id,
          MerchantCreatorId: this.entity.CreatorId,
          CreatorId: this.userInfo.Id,
      }

      console.log('参数', params)
      //创建loading对象开始遮罩
      const rLoading = this.openLoading();
      this.$http.post("/Base/Bank_InfoClient/SaveData", params)
        .then((resJson) => {
          if (resJson.Success) {
           //请求结束关闭loading
            setTimeout(function () {
              rLoading.close();
              // 关闭弹窗
              that.drawer=false
              // 重新加载列表
              that.parentObj.reset();
              that.$message.success('已添加')
            }, 500);
          
          } else {
              //请求结束关闭loading
            setTimeout(function () {
              rLoading.close();
            }, 500);
            // 禁止添加按钮
            this.btnDisabled=true
            this.btnType="danger"
            this.noneText = resJson.Msg
            // this.$message.error(resJson.Msg);
          }
        });
    },
  },
};
</script>

<style>
.drawerClass {
  padding: 10px;
}
.mask{
  background-color: rgb(0,0,0,0.6);
  width:46%;
  height:158px; 
  position: absolute;
  border-radius: 5px;
  margin-top:30px;
}
</style>
